<template>
	<div class="cart-warp">
    <div v-if="carts&&carts.length>0" class="cartb" >
    <!-- <div v-if="!true"> -->
  		<div class="cart-main">
       
          <card class="dian" v-for="(dian,dianId) in carts"  :key="dianId">
            <div class="dian-header" slot="header" @click="toggleSeletForDian(dianId)">
                <check-icon class="check-icon" :value="isAllSelectByDian(dianId)"></check-icon>
                <img :src="require('../assets/images/dian.png')" alt="">{{dian.name}}
            </div>
            <div slot="content">
              <cart-item v-for="(cartItem,shopIndex) in dian.shops" 
                :key="shopIndex" 
                :cartItem="cartItem" 
                :dianId="dianId"
                :shopIndex="shopIndex"
              />
            </div>
          </card>
       
      </div>
      <div class="pay">

         <div class="pay-left" @click="toggleAllSelect">
           <check-icon class="check-icon" :value="isAllSelect"></check-icon><span>全选</span>
         </div>
         <div class="pay-right">
           <span class="total-price">合计：<span class="pay-right-price">￥{{total|price}}</span></span>
           <span class="submit" @click="goBuy">结算</span>
         </div>
      </div>
    </div>
    <div class="emptyBox flex" v-else>
      <img src="../assets/images/kongcart.png">
      <div class="tip">购物车空空的,去加点什么吧</div>
      <div class="btn" @click="goIndex">到处逛逛</div>
    </div>
		<footer-nav></footer-nav>
	</div>
</template>
<script>
 import axios from '@/api/request'
import FooterNav from "../components/footer-nav";
import CartItem from "../components/cart-item";
import { Group, Card, CheckIcon } from "vux";
import { mapState, mapGetters, mapActions } from "vuex";
import bgMixin from '../mixins/bg'
export default {
	name: "cart",
	mixins:[bgMixin],
  components: {
    FooterNav,
    CartItem,
    Group,
    Card,
    CheckIcon,
  },
	
  data() {
    return {
      cars:''
    };
  },
  created(){
    this.$store.dispatch('GetCars',this.$route.query.userId);
  },
  computed: {
    ...mapGetters(['isAllSelectByDian','isAllSelect','total','carts'])
  },
  methods: {
    ...mapActions(['toggleSeletForDian','toggleAllSelect']),
   goIndex(){
      this.$router.push({ path:'/home'})
   },
    goBuy(){   ///device/indent/placeOrder
     var self=this
     this.$store.commit('UpCarts',self.carts);
       self.$router.push({ path:'/OrderDetail', query: { userId: self.$route.query.userId }})
  
       
      //  var self=this
      //   var shopCarIds=[]
      //   for(let a=0;a<this.carts.length;a++){
      //      for(let b=0;b<this.carts[a].shops.length;b++){
            
      //         if(this.carts[a].shops[b].select==true){
      //           var pus={
      //              count:this.carts[a].shops[b].count,
      //              shopCarId:this.carts[a].shops[b].shopCarId
      //           }
      //            shopCarIds.push(pus)
      //         }
      //      }
      //   }
      //   var data={
      //      userId:this.$route.query.userId,                  //购买人（用户）ID
      //      indentType:'1',                    //订单类型   （1：商品购买  ）
      //      totalPrice:this.total,        
      //      shopCarIds:shopCarIds
      //   }
      //   axios('/device/indent/placeOrder','post',data).then(res=>{
      //   if(res.data.code==1000){
      //     console.log(res)
      //       self.buy(res.data.data)
      //   }
      // })
    },
    goHome() {
      this.$router.push({ path:'/home'})
    }
    // buy(orderId){   //device/pay/
    //    var self=this   
    //           //var bb= new Array()
    //           //bb.push(self.getMyKeyon.id)
    //          var data={
    //            totalPrice:this.total,
    //            userId:this.$route.query.userId,
    //            indentType:'1',
    //            addressId:"",
    //            orderNo:orderId,
    //            couponInfoId:""
    //          }
    //          console.log(data)
    //          axios('/device/pay/','post',data).then(res=>{
    //             console.log(res)
    //                console.log(res)
    //               this.jsApiParameters=res.data.data.finalpackage
    //               this.callpay()
    //          })
    // },
    //  jsApiCall()
    //         {
    //           let _this=this
    //           WeixinJSBridge.invoke(
    //                 'getBrandWCPayRequest',
    //                 this.jsApiParameters,
    //                 function(res){
    //                     WeixinJSBridge.log(res.err_msg);
                       
    //                     if(res.err_msg == "get_brand_wcpay_request:ok"){
    //                    // alert(res.err_code+res.err_desc+res.err_msg);
    //                     window.location.href="http://www.chenyekeji.com/21market2//#/paySuccess?userId"+_this.$route.query.userId;
    //                 }else{
    //                     //返回跳转到订单详情页面
    //                     alert(支付失败);
                            
    //                 }
    //                 }
    //             );
    //         },
    //         callpay()
    //         {
    //             if (typeof WeixinJSBridge == "undefined"){
    //                 if( document.addEventListener ){
    //                     document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
    //                 }else if (document.attachEvent){
    //                     document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
    //                     document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
    //                 }
    //             }else{
    //                this.jsApiCall();
    //             }
    //         } ,
  }
};
</script>
<style lang="less" scoped >
@import "../assets/less/cart.less";
.cartb{
      padding-bottom: 120px;
}
.cart-warp{
  height: 100%;
  width: 100%;
  .emptyBox{
    width: 100%;
    height: 100%;
    dispaly:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img{
      width: 160rem/75;
      height: 124rem/75;
    }
    .tip{
      margin-top: 50rem/75;
      color: #333;
      font-size: 22rem/75;
    }
    .btn{
      width: 160rem/75;
      height: 48rem/75;
      line-height: 48rem/75;
      border-radius: 2px;
      margin-top: 50rem/75;
      font-size: 24rem/75;
      background: #ff4444;
      color: #fff;
      text-align: center;
    }
  }
}
</style>


